@theme {
  /* Default Tailwind breakpoints */
  --breakpoint-sm: 40rem; /* 640px */
  --breakpoint-md: 48rem; /* 768px */
  --breakpoint-lg: 64rem; /* 1024px */
  --breakpoint-xl: 80rem; /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */

  /* Our custom breakpoints: don't use in Tailwind demos */
  --breakpoint-xs: 32rem; /* 512px */

  /* Functional breakpoints */
  --breakpoint-show-side-nav: 64rem; /* 1024px */
  --breakpoint-show-quick-nav: 84rem; /* 1344px */
  --breakpoint-max-layout-width: 89rem; /* 1424px - this is a 1440px device minus 16px scrollbar */
}

@custom-media --xs (min-width: 32rem);
@custom-media --sm (min-width: 40rem);
@custom-media --md (min-width: 48rem);
@custom-media --lg (min-width: 64rem);
@custom-media --xl (min-width: 80rem);
@custom-media --2xl (min-width: 96rem); /* stylelint-disable-line custom-media-pattern */
@custom-media --show-side-nav (min-width: 64rem);
@custom-media --show-quick-nav (min-width: 84rem);
